<template>
  <el-dialog
    v-bind="$attrs"
    width="1000px"
    @close="handleClose"
    @open="handleOpen"
  >
    <!--    <el-tabs v-model="activeName" >
          <el-tab-pane label='黑名单' name="first">

          </el-tab-pane>
          <el-tab-pane label='配置' name="second">
            <el-form :model='dataForm' :rules='dataRule' ref='dataForm' label-width="50px"
                     v-loading="dataListLoading">
              <el-form-item prop="treeData">
                <el-tree
                  ref="tree"
                  node-key="menuId"
                  show-checkbox
                  :data="treeData"
                  v-model="node"
                  :props="defaultProps"
                  :default-checked-keys="defaultKeys"
                >
                  <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span class="label">{{ node.label }}</span>
                  </div>
                </el-tree>
              </el-form-item>
              <span slot='footer' class='dialog-footer'>
              <el-button type='danger' @click='handleClose'>Cancel</el-button>
              <el-button type='primary' @click='dataFormSubmit()'>Confirm</el-button>
            </span>
            </el-form>
          </el-tab-pane>
        </el-tabs>-->
    <el-form v-loading="dataListLoading">
      <el-form-item prop="treeData">
        <!-- <div style="width:50%;">
          <p style="font-weight:600;font-size:16px;text-indent: 8px;line-height: 30px;">{{$t('system_menu.system_menu')}}:</p>        
          <el-tree
          ref="tree"
          v-model="node"
          node-key="menuId"
          show-checkbox
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="defaultKeys"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span class="label">{{
              data.list
                ? $t('menu.operator.M_' + data.menuId)
                : $t('menu.operator.' + node.label)
            }}</span>
          </div>
        </el-tree>
        </div> -->
        <!-- <div style="width:50%;">
          <p style="font-weight:600;font-size:16px;text-indent: 8px;line-height: 30px;">{{$t('system_menu.open_capability')}}:</p>        
          <el-tree
          ref="openTree"
          v-model="node"
          node-key="menuId"
          show-checkbox
          :data="openTreeData"
          :props="defaultProps"
          :default-checked-keys="defaultKeys"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span class="label">{{
              data.list
                ? $t('menu.operator.M_' + data.menuId)
                : $t('menu.operator.' + node.label)
            }}</span>
          </div>
        </el-tree>
        </div> -->
        <div
          class="mt-4 flex justify-between"
          style="gap: 30px; flex-wrap: wrap"
        >
          <div
            v-for="(tree, index) in treeData"
            :key="index"
            style="width: 280px; min-width: 200px"
          >
            <p
              style="
                text-indent: 8px;
                line-height: 32px;
                font-weight: 500;
                font-size: 16px;
              "
            >
              {{ $t('system_menu.platform_list.' + tree.platform) }}
            </p>
            <div style="overflow: auto; height: 480px">
              <el-tree
                ref="treeRef"
                v-model="node"
                node-key="menuId"
                show-checkbox
                :data="tree.list"
                :props="defaultProps"
              >
                <template v-slot="{ node, data }">
                  <div class="custom-tree-node">
                    <span class="label">{{
                      data.list
                        ? $t('menu.operator.M_' + data.menuId)
                        : $t('menu.operator.' + node.label)
                    }}</span>
                  </div></template
                >
              </el-tree>
            </div>
          </div>
        </div>
      </el-form-item> </el-form
    ><template #footer>
      <span class="dialog-footer">
        <el-button
          v-if="isAuth('10400202.MANAGE')"
          size="small"
          @click="handleClose"
          >{{ $t('common.cancel') }}</el-button
        >
        <el-button
          v-if="isAuth('10400202.MANAGE')"
          size="small"
          type="primary"
          :loading="dataListLoading"
          @click="dataFormSubmit"
          >{{ $t('common.confirm') }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>

<script>
import { postBlackList, getBlackList } from '@/api'
import { menuDataTransform } from '@/utils/index'
import { menuDataTranslate2 } from '@/utils'
import {
  getOperatorMenuList,
  getOperatorMenuFunctionList,
  getBlackListInfo,
  setBlackListInfo
} from '@/api/operator'
import { getAllPermission } from '@/api/system-menu'
import { isAuth } from '@/utils'

export default {
  props: ['operatorId'],
  data() {
    return {
      dataListLoading: false,
      treeData: [], //存放不同平台的权限树的数据
      openTree: [],
      node: [],
      defaultKeys: [],
      defaultProps: {
        children: 'list',
        label: 'menuTitle'
      }
    }
  },
  mounted() {},
  methods: {
    handleOpen() {
      this.treeData = []
      this.getMenuPermission()
      // this.getBlackList()
      // this.getOperatorMenuList()
    },
    // getBlackList() {
    //   this.defaultKeys = []
    //   const params = {
    //     characterCode: 'OPERATOR',
    //     keyId: this.operatorId
    //   }
    //   getBlackList(params)
    //     .then((data) => {
    //       if (data && data.length > 0) {
    //         for (var i = 0; i < data.length; i++) {
    //           this.defaultKeys.push(data[i].menuId)
    //         }
    //       }
    //     })
    //     .catch((e) => {
    //       this.$confirmError(e)
    //     })
    // },
    //获取黑名单数据
    getBlackList() {
      this.defaultKeys = []
      let params = {
        pageNo: 1,
        pageSize: 1000
      }
      getBlackListInfo(params, this.operatorId)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            const checkedArray = res.data.map((v) => v.menuFuncCode)
            console.log('check', checkedArray)
            for (let i = 0; i < this.treeData.length; i++) {
              this.$refs['treeRef'][i].setCheckedKeys(checkedArray)
            }
          }
          // // for (var i = 0; i < res.data.length; i++) {
          // for (var j = 0; j < res.data.length; j++){
          //   // this.defaultKeys.push(res.data[i].menuFuncCode)

          // }

          // }
          // }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    // getOperatorMenuList() {
    //   const params = {
    //     characterCode: 'OPERATOR',
    //     keyId: this.operatorId
    //   }
    //   this.dataListLoading = true
    //   getOperatorMenuList(params)
    //     .then((data) => {
    //       this.treeData = menuDataTransform(data, 'menuId', 'parentMenuId')
    //       console.log(this.treeData)
    //       this.dataListLoading = false
    //     })
    //     .catch((e) => {
    //       this.$confirmError(e)
    //       this.dataListLoading = false
    //     })
    // },
    /**
     * 将功能权限当作菜单加入菜单的Tree中
     * @param menuList
     * @param functionList 功能列表
     */
    initMenuFunctionTree(menuList, functionList) {
      for (let menu of menuList) {
        if (menu.list && menu.list.length > 0) {
          this.initMenuFunctionTree(menu.list, functionList)
        } else {
          for (let fun of functionList) {
            if (menu.menuId === fun.menuId) {
              if (menu.list === undefined) {
                menu.list = []
              }
              var newObj = {
                menuId: fun.menuFuncCode,
                menuTitle: fun.funName
              }
              menu.list.push(newObj)
            }
          }
        }
      }
    },
    handleClose() {
      // this.treeData = []
      this.defaultKeys = []
      this.$emit('close')
    },
    //提交黑名单信息
    dataFormSubmit() {
      this.dataListLoading = true
      let checkTemp = []
      for (let i = 0; i < this.treeData.length; i++) {
        let checkedNodes = this.$refs['treeRef'][i]
          .getCheckedNodes()
          .filter((node) => !node.list)
          .map((node) => ({ menuFuncCode: node.menuId }))
        for (let i = 0; i < checkedNodes.length; i++) {
          checkTemp.push(checkedNodes[i].menuFuncCode)
        }
      }
      console.log('checkTemp', checkTemp)
      let data = {
        keyId: this.operatorId,
        menuFuncCodeList: checkTemp
      }
      setBlackListInfo(data)
        .then((res) => {
          console.log(res)
          this.dataListLoading = false
          this.handleClose()
        })
        .catch((err) => {
          this.dataListLoading = false
          this.$confirmError(err)
        })
      // postBlackList(this.operatorId, { characterMenuBlacklistList: list })
      //   .then((data) => {
      //     // 修改配置
      //     this.dataListLoading = false
      //     this.handleClose()
      //   })
      //   .catch((e) => {
      //     this.dataListLoading = false
      //     this.$confirmError(e)
      //   })
    },
    //获取所有菜单和权限
    getMenuPermission() {
      getAllPermission('OPERATOR')
        .then((res) => {
          for (let i = 0; i < res.length; i++) {
            let temp = menuDataTranslate2(
              res[i].menuList,
              'menuId',
              'parentMenuId'
            )
            let obj = {
              platform: res[i].platform,
              list: temp
            }
            this.treeData.push(obj)
            this.initMenuFunctionTree(
              this.treeData[i].list,
              res[i].menuFunctionList
            )
          }
          console.log('treeData', this.treeData)
          this.getBlackList()
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    isAuth
  }
}
</script>

<style scoped>
.center {
  margin: 15px;
}

.custom-tree-node {
  /* flex: 1; */
  width: 300px;
  /* display: flex; */
  align-items: center;
  font-size: 14px;
  padding-right: 8px;

  .label {
    margin-right: 20px;
  }
}
</style>
